<template>
	<!-- 选择用户类型：学生/教师/机构 -->
	<view class="page">
		<view class="welcome">
			Welcome!
		</view>
		<view class="choice" v-for="(item,index) in imageList" :key="index" @click="chooseType(item.type)">
			<image :src="item.url" mode="aspectFill"></image>
			<text>{{item.name}}</text>
		</view>
	</view>
</template>

<script>
	import cloudbase from '@cloudbase/js-sdk'
	export default {
		data() {
			return {
				userInfo: {
					openId: '',
					type: ''
				},
				fileList: [
					'cloud://inspace-v1.696e-inspace-v1-1302892928/chooseImage/school.png',
					'cloud://inspace-v1.696e-inspace-v1-1302892928/chooseImage/student.png',
					'cloud://inspace-v1.696e-inspace-v1-1302892928/chooseImage/teacher.png'
				],
				imageList: [{
					name: '我是学生',
					url: '',
					type: '学生'
				}, {
					name: '我是教师',
					url: '',
					type: '教师'
				}, {
					name: '我是机构',
					url: '',
					type: '机构'
				}]
			}
		},
		onLoad() {
			let that = this;
			that.userInfo.openId = getApp().globalData.userInfo.openId;
			// console.log(that.userInfo.openId);
		},
		created() {
			this.getUrl();
		},
		onUnload() {
			// 如果离开这个页面，说明未注册 
			getApp().globalData.userInfo.openId = '';
			getApp().globalData.userInfo.type = '学生';
		},
		methods: {
			chooseType: function(index) {
				let that = this;
				that.userInfo.type = index;
				console.log(that.userInfo.type);
				uni.navigateTo({
					url: "../information/information?type=" + that.userInfo.type,
				})
			},
			getUrl: function() {
				let that = this;

				// that.insInformation.imageUrl = [];
				cloudbase.getTempFileURL({
					fileList: that.fileList
				}).then(res => {
					// console.log(res);
					let list = res.fileList;
					// list.forEach(v => {
					// 	that.insInformation.imageUrl.push(v.tempFileURL);
					// })
					for (let i in list) {
						that.imageList[i].url = list[i].tempFileURL;
					}
					// console.log(that.insInformation.imageUrl)
				})
			}
		}
	}
</script>

<style>
	.page {
		width: 750rpx;
		height: 1435rpx;
		background-color: #F3F5F7;
		display: flex;
		flex-direction: column;
	}

	.welcome {
		margin-top: 194rpx;
		margin-left: 122rpx;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 100rpx;
		color: #666666;
	}

	.choice {
		width: 702rpx;
		height: 268rpx;
		box-sizing: border-box;
		margin-left: 24rpx;
		margin-top: 30rpx;
		padding-left: 69rpx;
		padding-top: 60rpx;
		background-color: #FFFFFF;
		box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
		border-radius: 32rpx;

	}

	.choice image {
		width: 264rpx;
		height: 148rpx;
		vertical-align: middle;
	}

	.choice text {
		font-size: 45rpx;
		margin-left: 42rpx;
		color: #666666;
	}
</style>
